<template>
    <nut-searchbar
            :placeText="placeText"
            :hasSearchButton="hasSearchButton"
            :hasTextButton="hasTextButton"
            :hasIcon="hasIcon"
            :textInfo="textInfo"
            @blur="blurFun"
            @submitFun="submitFun"
            @input="inputFun"
            @click="focusFun"
    ></nut-searchbar>
</template>

<script>
    /* eslint-disable no-console */

    /**
     * @focus="focusFun"
     * @input="inputFun"
     * @blur="blurFun"
     * @submit="submitFun"
     * */

    export default {
        name: 'search',
        props: {
            placeText: {
                type: String,
                default:"请输入查询信息"
            },
            textInfo: {
                type: String,
                default:"查询"
            },
            animation: {
                type: Boolean,
                default: true
            },
            customClass: {
                type: String,
                default:'',
            }
        },
        data() {
            return {
                hasSearchButton:true,
                hasTextButton:true,
                hasIcon:true,
                childrenMessage: '',
                clazz:null
            }
        },
        updated(){
            this.childrenMessage = this.textInfo;
            // 点击传值给父组件，通过$emit传递，
            // 第一个参数messageData相当于传播的媒介，
            // this.childrenMessage为需要传递的值，
            // 后面也可以传递多个参数
            this.$emit('messageData', this.childrenMessage);
        },
        methods: {
            focusFun() {
                console.log('获取焦点操作！');
            },
            inputFun(value) {
                console.log(value);
                console.log('您正在输入...');
                clearTimeout(this.clazz);
                let _that = this;
                this.clazz = setTimeout(function () {
                    console.log("---------push accept--------");
                    _that.childrenMessage = value;
                    _that.$emit('messageData', _that.childrenMessage);
                },500)

            },
            blurFun(value) {
                console.log(value);
                console.log('您已失去焦点！');
                this.childrenMessage = value;
                // 点击传值给父组件，通过$emit传递，
                // 第一个参数messageData相当于传播的媒介，
                // this.childrenMessage为需要传递的值，
                // 后面也可以传递多个参数
                this.$emit('messageData', this.childrenMessage);
            },
            submitFun(value) {
                console.log(value);
                console.log('默认提交操作！');
                this.childrenMessage = value;
                this.$emit('messageData', this.childrenMessage)
            }
        }
    }
</script>

<style scoped>

</style>